<template>
	<div class="app-container">
		<div class="dis">
			<div>
				<div class="foSi12 hei20" style="color: #838383;">合同名称</div>
				<el-input v-model="name"  size="small" style="width: 140px;" placeholder="合同名称" />
			</div>
			<div class="mar-left10">
				<div class="foSi12 hei20" style="color: #838383;">合同状态</div>
				<el-select v-model="statusIndex" style="width: 140px;" placeholder="Select" size="small">
					<el-option v-for="item in status" :key="item.id"
						:label="item.name" :value="item.id" />
				</el-select>
			</div>
			<div class="mar-left10">
				<div class="foSi12 hei20" style="color: #838383;">场馆签署人</div>
				<el-input v-model="signatory"  size="small" style="width: 140px;" placeholder="场馆签署人" />
			</div>
			<div class="mar-left10">
				<div class="hei20 foSi12" style="color: #838383;">发起时间</div>
				<el-date-picker v-model="birthday_start" style="width: 140px" size="small" type="date"
					placeholder="开始时间" />
				<el-date-picker v-model="birthday_end" class="mar-left10" style="width: 140px;" size="small"
					type="date" placeholder="截至日期" />
			</div>
			<div class="mar-left10">
				<div class="foSi12 hei20" style="color: #838383;">顾客</div>
				<el-input v-model="customer"  size="small" style="width: 140px;" placeholder="顾客姓名/手机号" />
			</div>
			<div class="mar-left10">
				<el-button type="primary" size="small" class="mar-top20 bac6b7"
					@click.stop="suosouClick()">搜索</el-button>
			</div>
		</div>
		<el-table ref="singleTable" class="wid100 mar-top20" v-loading="listLoading" :row-style="{ background: '#f2f2f2' }"
			stripe :data="list" highlight-current-row>
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column prop="flowid" label="合同ID" />
			<el-table-column prop="flowname" label="合同名称" />
			<el-table-column prop="state" label="合同状态" />
			<el-table-column prop="promoter" label="发起人" />
			<el-table-column prop="course_fee" label="场馆签署人" />
			<el-table-column prop="createtime" label="发起时间" />
			<el-table-column prop="sign_user" label="顾客姓名" />
			<el-table-column prop="sign_user_tel" label="顾客手机号" />
			<el-table-column :label="$t('table.actions')" align="center" width="200"
				class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<div class="wid100 dis disJuC">
						<div class="dis disAl cuPo" @click.stop="sign(scope.row.flowid)"><i class="el-icon-coordinate" style="color: #6b7cdd; font-size: 20px" />签署合同</div>
						<div class="dis disAl cuPo" @click.stop="details(scope.row.flowid)"><i class="el-icon-document" style="color: #6b7cdd; font-size: 20px;margin-left:10px" />合同详情</div>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />


		<div v-if="shuaVisible" class="zhezhao wh100" />
		<div v-if="shuaVisible" v-loading="sign_loading" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" style="width: 862px;">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;">
						<div class="dis disAl">
							<div class="foSi20 fowe600 mar-right10">签署方式</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" style="color: #ACACAC;width: 24px;height: 24px;"
							@click.stop="shuaVisible = !shuaVisible" />
					</div>
					<div class="sign_box" style="padding: 20px 0;">
						<div class="signitem">
							<div style="font-size: 18px;font-weight: bold;">发起方签署</div>
							<img style="margin-top: 10px;width:150px;" :src="signdata.launch_ewm">
							<el-link type="primary" @click="downloadImg(signdata.launch_ewm, '企业签署二维码')">下载</el-link>
							<div style="margin-top: 20px;">签署链接：{{ signdata.launch_link }}<el-button size="mini" round @click="copyText(1)">复制链接</el-button></div>
						</div>
						<div class="signitem">
							<div style="font-size: 18px;font-weight: bold;">会员签署</div>
							<img style="margin-top: 10px;width:150px;" :src="signdata.sign_ewm">
							<el-link type="primary" @click="downloadImg(signdata.sign_ewm, '会员签署二维码')">下载</el-link>
							<!-- <a :href="signdata.sign_ewm" download>下载二维码</a> -->
							<div style="margin-top: 20px;">签署链接：{{ signdata.sign_link }}<el-button size="mini" round @click="copyText(2)">复制链接</el-button></div>
						</div>
					</div>
					<div style="height:100px"></div>
				</div>
			</div>
		</div>



	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getContractList,
		getsign
	} from '@/api/contract'
	export default {
		name: 'myContract',
		components: {
			Pagination
		},
		data() {
			return {
				status: {
					0: {
						id: 1,
						name: '全部'
					},
					1: {
						id: 2,
						name: '签署中'
					},
					2: {
						id: 3,
						name: '已完成'
					},
					3: {
						id: 4,
						name: '已撤回'
					},
					4: {
						id: 5,
						name: '已过期'
					},
					5: {
						id: 6,
						name: '已拒绝'
					}
				},
				statusIndex: '全部',
				name:null,
				signatory: null,
				birthday_start: null,
				birthday_end: null,
				customer: null,
				list: null,
				total: 0,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 10
				},
				shuaVisible:false,
				signdata:{
					launch_ewm:'',
					launch_link:'',
					sign_ewm:'',
					sign_link:''
				}

			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '我发起的合同',
				url: '/contract/myContract',
				pd: true
			}, {
				name: '全部合同',
				url: '/contract/contractList',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			downloadImg(url, fileName) {
				const x = new window.XMLHttpRequest();
				x.open('GET', url, true);
				x.responseType = 'blob';
				x.onload = () => {
					const url = window.URL.createObjectURL(x.response);
					const a = document.createElement('a');
					a.href = url;
					a.download = fileName;
					a.click();
				};
				x.send();
			},
			copyText(type) {
				const input = document.createElement('input');
				input.value = type == 1 ? this.signdata.launch_link : this.signdata.sign_link; // 设置要复制的文本
				document.body.appendChild(input); // 添加input元素
				input.select(); // 选中文本
				document.execCommand('copy'); // 执行复制操作
				document.body.removeChild(input); // 移除input元素
				this.$message({
					message: '复制成功',
					type: 'success'
				});
    		},
			sign(flowid){
				this.listLoading = true
				getsign({flowid:flowid}).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.signdata = data
					this.shuaVisible = true
					this.listLoading = false
				}).catch(error => {
					this.listLoading = false
					console.log(error)
				})

			},
			details(id) {
				console.log(id)
				this.$router.push({
					path: '/contract/contractTemplateUpload?type=PREVIEW_FLOW_DETAIL&id='+id
				})
			},
			suosouClick(){
				this.listQuery.page = 1
				this.getList()
			},
			getList() {
				this.listLoading = true
				getContractList({
          'page': this.listQuery.page,
          'limit': this.listQuery.limit
        }).then(response => {
					const {
						data
					} = response
					this.total = data.total
					this.list = data.data
					this.listLoading = false
				}).catch(error => {
					this.listLoading = false
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
	.app-container {
		font-size: 14px;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	::v-deep .el-input__inner {
		height: 36px;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
		background-color: #616b74
	} */
	.m-content-box {
		position: relative;
		padding: 30px 63px;
	}

	.contract-initiate {
		width: 878px;
		margin: 0 auto;
	}

	.contract-initiate__hd {
		padding-top: 90px;
		text-align: center;
	}

	.contract-initiate__desc {
		display: flex;
		margin-top: 80px;
		justify-content: space-between;
	}

	.contract-initiate__hd-title {
		margin-bottom: 16px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
	}

	.contract-initiate__hd-sub-title {
		margin-bottom: 40px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
	}

	.contract-initiate__hd-btns {
		display: flex;
		justify-content: center;
	}

	.contract-initiate__desc-item {
		width: 200px;
		height: 292px;
		background: #ffffff;
		box-shadow: 0 2px 6px 5px rgba(242, 242, 242, .5);
		border-radius: 10px;
		box-sizing: border-box;
		text-align: center;
	}

	.contract-initiate__desc-icon {
		padding-top: 32px;
		line-height: 1;
	}

	.contract-initiate__desc-title {
		margin: 36px 0 24px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1;
	}

	.contract-initiate__desc-content {
		height: 26px;
		line-height: 1;
		color: #787878;
	}
	.sign_box{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.signitem{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
